<!--   @author  Created By  YS  on 2023/10/18 -->
<!--   @describe -->

<template>
  <div class="body">
    <div class="body">
      <div class="card">
        <image class="head-img" src="../../assets/img/logo.png" alt=""></image>
        <div class="content">
          <div class="content-name">
            <text>River</text>
            <div class="content-vip">
				<image src="../../static/common/vip.png" mode=""></image>
             <!-- <img src="../../assets/icon/arrow-up-bold.png" alt="">
              VIP -->
            </div>
          </div>
          <div class="content-info">
			  <image src="../../static/my/vip.png" mode=""></image>
            <!-- <img src="../../assets/icon/arrow-up-bold.png" alt=""> -->
            <text>24/155cm/50kg • 北京</text>
          </div>
        </div>
      </div>
    </div>
    <vipIntr>

    </vipIntr>
<!--  //支付方式-->
    <u-action-sheet :actions="payList" :show="show"
                    @close='close'
                    cancelText='取消'
                    :closeOnClickOverlay="true">
    </u-action-sheet>


    <u-popup :show="showPopup" @close="closePopUp" :round="10" @open="openPopup">
      <vipIntr>
      </vipIntr>
    </u-popup>



  </div>

</template>

<script>
import vipIntr from "@/pages/my/components/vipIntr";
export default {
  name: 'vipPage',
  components: {
    vipIntr
  },
  data() {
    return {

      list: [{
        active:true,
        thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        money: "388"
      }, {
        money: "88",
        thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
      }, {
        money:'30',
        thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
      }],
      radiolist1: [{
        disabled: false,
        name:'',
        value:'选中'
      },
      ],
      show: false,
      title:'支付宝',
      payList: [
        {
          name:'支付宝'
        },
        {
          name: '微信'
        }
      ],
      checkboxValue1:"",
      showPopup:true
    }
  },
  methods: {
    radioChange(e) {
      console.log(e)
    },
    openPay(){
      this.show = true;
    },
    close(){
      this.show = false;
    },
    closePopUp(){
      this.showPopup = false;
    },
    openPopup(){
      this.showPopup = true;
    }
  }
}
</script>

<style lang='scss' scoped>
@import "../../assets/css/base.scss";
.vip-li{
  width: 224rpx;
  height: 298rpx;
  box-sizing: border-box;
  display: flex;
  border:10rpx solid #999999;
  border-radius: 20rpx;
  flex-direction: column;
  //justify-content: ;
  align-items: center;
  //padding: 20rpx 0;
  margin-left: 20rpx;
  background: #999999;

  //border-bottom: 1rpx solid $uni-border-color;
  //div{
  //  background: #fff;
  //  width: 100%;
  //}
  .vip-li-year{
    width: 100%;
    background: #fff;
    height: 50rpx;
    opacity: 1;
    color: #333333;
    text-align: center;
    font-size: 36rpx;
    font-weight: 0;
    line-height: 43rpx;
    letter-spacing: 1.33rpx;
    padding-top:30rpx;
}
  .vip-li-money{
    width: 100%;
    background: #fff;
    height: 100rpx;
    opacity: 1;
    color: #fa6400;
    text-align: left;
    font-size: 72rpx;
    font-weight: 0;
    line-height: 86rpx;
    letter-spacing: -2.66rpx;
    text-align: center;
  }
  .vip-li-re-money{
    width: 100%;
    background: #fff;
    height: 50rpx;
    opacity: 1;
    color: #999999;
    text-align: center;
    font-size: 36rpx;
    font-weight: 0;
    line-height: 43rpx;
    letter-spacing: -1.33rpx;
    text-decoration:line-through
  }
  .vip-li-pay{
    color: #fff;
    width: 175rpx;
    height: 40rpx;
    opacity: 0.8;
    text-align: center;
    font-size: 28rpx;
    font-weight: 0;
    line-height: 34rpx;
    letter-spacing: -1.03rpx;
    margin-top: 10rpx;
  }
}

.active{
  background: #7355FF;
  border:10rpx solid #7355FF;
  .vip-li-pay{
    //background-color:#999999;
    color: #fff;
  }
}
.pay-img{
  width: 25rpx;
  height: 25rpx;
}
.agreement{
  font-size: 24rpx;
  color:#999999;
  justify-content: center;
  margin-top: 65rpx;
  span{
    color: #7355ff;
    cursor: pointer;
  }
}
.mt65{
  margin-top: 65rpx;
}

.vip-title-text {
  width: 750rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 1;
  color: #000000;
  text-align: left;
  font-size: 36rpx;
  font-weight: 0;
  padding-left: 40rpx;
}

.content-vip {
	&>image {
		width: 95rpx;
		height: 33rpx;
	}
}

.content-info {
	&>image {
		width: 34rpx;
		height: 34rpx;
	}
}
</style>
